<script setup lang="ts">
import * as THREE from 'three'
import { onMounted, onBeforeUnmount, ref } from 'vue';

const container = ref(null);
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();

// 创建一个平面并添加到场景中
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1),
  new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide })
);
scene.add(plane);
camera.position.set(0, 1, 2); // 设置摄像机位置
scene.add(camera);

// 更新渲染器和摄像机的函数
function updateSize() {
  if (container.value) {
    const width = container.value.clientWidth;
    const height = container.value.clientHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.render(scene, camera);
  }
}

onMounted(() => {
  if (container.value) {
    container.value.appendChild(renderer.domElement);
    updateSize(); // 初始更新尺寸
  }

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();

  // 监听窗口大小变化
  window.addEventListener('resize', updateSize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateSize);
});
</script>

<template>
  <div ref="container" style="width: 100%; height: 100vh;"></div>
</template>

<style>
/* 你的样式 */
*{
  margin: 0;
  padding: 0;
}
</style>